<template>
  <div class="login-container">
    <div class="login-bg-image">
      <img src="@/assets/images/bg.jpg" alt="背景图">
    </div>
    <div class="login-content">
      <div class="login-box">
        <div class="login-header">
          <img class="logo-img" src="@/assets/images/logo.jpg" alt="文献助手">
          <div class="text-center">
            <h1 class="text-2xl font-bold login-title">文献助手</h1>
            <p class="text-muted-foreground text-sm">智能文献阅读与管理平台</p>
          </div>
        </div>
        <div class="tab-container">
          <el-button 
            :class="tabIndex == 1 ? 'tab-button active' : 'tab-button'" 
            :icon="User" 
            @click="changeTab(1)"
          >
            登录
          </el-button>
          <el-button 
            :class="tabIndex == 2 ? 'tab-button active' : 'tab-button'" 
            :icon="Iphone" 
            @click="changeTab(2)"
          >
            注册
          </el-button>
        </div>
        <div class="form-container">
          <div v-if="tabIndex == 1">
            <div class="form-group">
              <el-input 
                v-model="form.nickname" 
                placeholder="请输入用户名/手机号/邮箱" 
                :prefix-icon="User"
              />
            </div>
            <div class="form-group">
              <el-input 
                v-model="form.password" 
                placeholder="请输入密码" 
                type="password" 
                show-password
                :prefix-icon="Lock"
              />
            </div>
            <el-button class="login-submit-btn" @click="onLogin">登录</el-button>
          </div>
          <div v-else-if="tabIndex == 2">
            <div class="form-group">
              <el-input 
                v-model="registerForm.nickname" 
                placeholder="请输入用户名" 
                :prefix-icon="User"
              />
            </div>
            <div class="form-group">
              <el-input 
                v-model="registerForm.password" 
                placeholder="请输入密码" 
                type="password" 
                show-password
                :prefix-icon="Lock"
              />
            </div>
            <div class="form-group">
              <el-input 
                v-model="registerForm.phone" 
                placeholder="请输入手机号/邮箱" 
                :prefix-icon="Phone"
              />
            </div>
            <el-button class="login-submit-btn" @click="onRegister">注册</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { login, register } from '@/api/user'
import { User, Iphone, Lock, Phone } from '@element-plus/icons-vue'

const router = useRouter()
const tabIndex = ref(1)

const changeTab = (index) => {
  tabIndex.value = index
}

const form = reactive({
  nickname: '',
  password: ''
})

const registerForm = reactive({
  nickname: '',
  password: '',
  email: '',
  phone: ''
})

async function onLogin() {
  if (!form.nickname || !form.password) {
    ElMessage.error('请输入用户名和密码')
    return
  }
  try {
    const res = await login({
      nickname: form.nickname,
      password: form.password
    })
    localStorage.setItem('token', res.data.accessToken)
    localStorage.setItem('userInfo', JSON.stringify(res.data.userInfo))
    ElMessage.success(`欢迎，${form.nickname}！`)
    router.push('/home')
  } catch (error) {
    console.error('登录失败:', error)
  }
}

async function onRegister() {
  if (!registerForm.nickname) {
    ElMessage.error('请输入用户名')
    return
  }
  if (!registerForm.password) {
    ElMessage.error('请输入密码')
    return
  }
  let params = {
    nickname: registerForm.nickname,
    password: registerForm.password
  }
  if (isValidChinesePhoneNumber(registerForm.phone)) {
    params.phone = registerForm.phone
  } else if (validateEmail(registerForm.phone)) {
    params.email = registerForm.phone
  } else {
    ElMessage.error('请输入正确的手机号或邮箱')
    return
  }
  try {
    await register(params)
    ElMessage.success('注册成功，请重新登录')
    location.reload()
  } catch (error) {
    console.error('注册失败:', error)
  }
}

function isValidChinesePhoneNumber(phone) {
  const regex = /^1[3-9]\d{9}$/
  return regex.test(phone)
}

function validateEmail(email) {
  const re = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/
  return re.test(String(email).toLowerCase())
}
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.login-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  filter: brightness(0.3);
  overflow: hidden;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(12, 20, 33, 0.85) 0%, rgba(23, 37, 84, 0.9) 100%);
    z-index: 1;
  }
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      radial-gradient(circle at 20% 30%, rgba(79, 70, 229, 0.1) 0%, transparent 25%),
      radial-gradient(circle at 80% 70%, rgba(167, 139, 250, 0.1) 0%, transparent 30%),
      radial-gradient(circle at 40% 80%, rgba(96, 165, 250, 0.1) 0%, transparent 20%),
      radial-gradient(circle at 60% 20%, rgba(103, 232, 249, 0.1) 0%, transparent 25%);
    z-index: 2;
    animation: float 8s ease-in-out infinite;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) translateX(0px);
  }
  25% {
    transform: translateY(-10px) translateX(5px);
  }
  50% {
    transform: translateY(5px) translateX(-5px);
  }
  75% {
    transform: translateY(-5px) translateX(10px);
  }
}

.login-content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
}

.login-box {
  width: 100%;
  max-width: 480px;
  background: var(--menu-background-all);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.login-header {
  text-align: center;
  margin-bottom: 32px;
  .logo-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 16px;
    border: 2px solid var(--primary);
    padding: 4px;
  }
  .login-title {
    color: var(--txt-color);
    margin-bottom: 8px;
  }
  .text-muted-foreground {
    color: var(--muted-foreground);
  }
}

.tab-container {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
  justify-content: center;
  .tab-button {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--txt-color);
    padding: 8px 24px;
    border-radius: 50px;
    transition: all 0.3s ease;
    &:hover {
      border-color: var(--primary);
      color: var(--primary);
    }
    &.active {
      background: var(--primary);
      border-color: var(--primary);
      color: white;
    }
  }
}

.form-container {
  .form-group {
    margin-bottom: 20px;
    :deep(.el-input) {
      --el-input-bg-color: var(--menu-background);
      --el-input-text-color: var(--txt-color);
      --el-input-border-color: var(--border);
      --el-input-hover-border-color: var(--primary);
      --el-input-focus-border-color: var(--primary);
      --el-input-icon-color: var(--muted-foreground);
    }
    :deep(.el-input__inner) {
      border-radius: 12px;
      background: var(--menu-background);
      color: var(--txt-color);
      height: 48px;
    }
  }
}

.login-submit-btn {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  background: var(--primary);
  border: 1px solid var(--primary);
  color: white;
  font-size: 16px;
  font-weight: 500;
  margin-top: 8px;
  transition: all 0.3s ease;
  &:hover {
    background: var(--primary);
    opacity: 0.9;
    transform: translateY(-2px);
  }
  &:active {
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .login-box {
    padding: 32px 24px;
  }
  .login-header {
    margin-bottom: 24px;
    .logo-img {
      width: 64px;
      height: 64px;
    }
  }
  .tab-container {
    margin-bottom: 24px;
  }
}

@media (max-height: 600px) {
  .login-container {
    height: auto;
    min-height: 100vh;
    padding: 24px 0;
  }
}
</style>